<template>
	<view>
		<!-- ====== begin 轮播图功能 ====== -->
		<view class="swiper" v-if="slideImgs.length" style="background-color: #FFFFFF;">
			<swiper indicator-dots="true" :autoplay="autoplay" :circular="circular" :interval="interval"
				:duration="duration" indicator-color="#E4E4E4" indicator-active-color="#E93323" previous-margin="40rpx"
				next-margin="40rpx" :current="swiperCur" @change="swiperChange">
				<block v-for="(item, index) in slideImgs" :key="index">
					<swiper-item :class="{ active: index == swiperCur }">
						<view @click="goUrl(item.url)" class="slide-navigator acea-row row-between-wrapper">
							<image :src="item.pic" class="slide-image"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- ====== end 轮播图功能 ====== -->

		<view style="padding: 16rpx 40rpx; background-color: #FFFFFF; border-radius: 12rpx;">
			<view style="color: #888888; font-size: small;">{{merAddress}}</view>
			<view style="display: flex; align-items: center;">
				<view style="flex: 1; margin: 10rpx 0rpx; font-size: x-large; font-weight: bold; color: #333333;">
					{{merName}}
				</view>

				<!-- ====== begin 关注功能 ====== -->
				<view>
					<button hover-class="none" :class="merCare ? 'carebtn on' : 'carebtn off'" v-if="!isLogin"
						@click="authOpen">
						<text v-show="!merCare" class="iconfont icon-guanzhu"></text>
						{{ merCare ? '已关注' : '关注' }}
					</button>
					<button v-else hover-class="none" :class="merCare ? 'carebtn on' : 'carebtn off'"
						@click="followToggle">
						<text v-show="!merCare" class="iconfont icon-guanzhu"></text>
						{{ merCare ? '已关注' : '关注' }}
					</button>
				</view>
				<!-- ====== begin 关注功能 ====== -->

			</view>

			<view style="display: flex; font-size: small; justify-content: space-between;" v-if="0" > <!-- 郝总觉得没用，暂时隐藏 -->
				<view style="display: flex;">
					<view>评分: {{merScore}}</view>
					<view style="width:20rpx" />
					<view>关注: {{merCareCount}}</view>
				</view>
				<view @click="onTapPhone"><text class="iconfont icon-dianhau" style="color: limegreen; margin-right: 10rpx;"></text>{{merPhone}}</view>
			</view>
		</view>

		<view style="margin: 20rpx 20rpx;">

			<view
				style="display: flex; justify-content: space-around; padding: 20rpx 20rpx; background-color: #FFFFFF; border-radius: 12rpx;"  v-if="0" > <!-- 郝总觉得没用，暂时隐藏 -->
				<view class="rank">
					<image style="width:50rpx; height:50rpx;" src="/static/images/3-001.png"></image>
					<view style="margin: 4rpx 0rpx;">累计人次</view>
					<view style="color: #888888; font-size: small;">{{merOdCount || 0}}</view>
				</view>

				<view style=" display: flex; align-items: center; flex-direction: column;">
					<image style="width:50rpx; height:50rpx;" src="/static/images/fsh-002.png"></image>
					<view style="margin: 4rpx 0rpx;">累计回鱼</view>
					<view style="color: #888888; font-size: small;">{{merRetFshSum || 0}}</view>
				</view>

				<!--
				<view style=" display: flex; align-items: center; flex-direction: column;" @click="onTapLocationNav">
					<image style="width:50rpx; height:50rpx;" src="/static/images/address.png"></image>
					<view style="margin: 4rpx 0rpx;">导航出发</view>
					<view style="color: #888888; font-size: small;">距您?km</view>
				</view>

				<view style=" display: flex; align-items: center; flex-direction: column;" @click="onTapShare">
					<view class='iconfont icon-fenxiang' style="width:50rpx; height:50rpx;font-size: 20px; font-weight: bold; color: #4e544f; margin-top: 10rpx; margin-bottom: -10rpx;"></view>
					<view style="margin: 4rpx 0rpx;">钓场分享</view>
					<view style="color: #888888; font-size: small;">助力钓场推广</view>
				</view>
				-->
			</view>

			<view style="margin: 20rpx 0rpx; background-color: #FFFFFF; border-radius: 12rpx;">
				<view
					style="padding: 20rpx 20rpx; height: 80rpx; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f5f5f5;"
					@click="goRankPage">
					<view>动态排名</view>
					<view>更多 > </view>
				</view>

				<view v-if="rank.length>0" style="padding: 20rpx 40rpx; display: flex;">
					<view class="rank" v-for="(item, index) in rank" :key="index" style="width:34%">
						<image class="modal" :src="'/static/images/medal0'+(index+1)+'.png'"></image>
						<image class="avatar" :src="item.userAvatar"></image>
						<view class="ellipsis">{{item.userNickname}}</view>
						<view>{{item.ypRetPriceType==2 ? item.totalRetNum+"条" : item.totalRetWeight+"斤"}}</view>
					</view>
				</view>
				<view v-else style="width: 100%; height: 150rpx; display: flex; justify-content: center; align-items: center;">
					<text>今日暂无排名</text>
				</view>
			</view>

			<!-- ====== begin 商品列表功能 ======
			商品列表UI参考 /pages/store/home/index.vue -->
			<view style="margin: 20rpx 0rpx; background-color: #FFFFFF; border-radius: 12rpx;">
				<view style="padding: 20rpx 20rpx; height: 80rpx; border-bottom: 1px solid #f5f5f5;">
					<view>商品列表</view>
				</view>

				<view class="goods column">
					<view v-for="(item, index) in goods" :key="item.productId" class="item" @click="goGoodsDetail(item)">
						<view class="image">
							<image :src="item.image"></image>
						</view>
						<view class="text">
							<view class="name line1">
								<span v-if="item.productType != 0"
									:class="'font_bg-red type'+item.productType">{{item.productType == 1 ? "秒杀" : item.productType == 2 ? "预售" : item.productType == 3 ? "助力" : item.productType == 4 ? "拼团" : ""}}</span>
								<text class="name_text line1">{{ item.storeName }}</text>
							</view>
							<view class="money-wrap">
								<view class="money">
									¥<text>{{ item.price }}</text></view>
								<view class="ticket" v-if="item.issetCoupon">领券</view>
							</view>
							<view class="score">{{ item.rate }}评分 {{ item.replyCount }}条评论</view>
						</view>
					</view>
				</view>
				<view :hidden="!goodsLoading" class="acea-row row-center-wrapper loadingicon">
					<text class="iconfont icon-jiazai loading"></text>
				</view>
				<emptyPage v-if="goods.length == 0 && !goodsLoading" title="暂无商品~"></emptyPage>
			</view>
			<!-- ====== end 商品列表功能 ====== -->

		</view>


		<!-- ====== begin 授权功能 ====== -->
		<!-- #ifdef MP -->
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<!-- #endif -->
		<!-- ====== end 授权功能 ====== -->
	</view>
</template>

<script>
	import {
		MyTip
	} from '@/components/ssty/common.js';
	
	
	// ====== begin 授权功能 ======
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import emptyPage from '@/components/emptyPage.vue';
	import { toLogin } from '@/libs/login.js';
	// ====== end 授权功能 ======

	import {
		getStoreDetail,
		getStoreGoods,
		getStoreCategory,
		followStore,
		unfollowStore,
		storeServiceList
	} from '@/api/store.js';
	
	import {
		loadFshGroundHomePage,
		queryGoodsByFshGround
	} from '@/api/fsh.js';
	const app = getApp();
	
	// ====== begin 关注功能 ======
	import {
		mapGetters
	} from "vuex";
	// ====== end 关注功能 ======


	export default {
		// ====== begin 授权功能 ======
		components: {
			// #ifdef MP
			authorize,
			// #endif
			emptyPage
		},
		// ====== end 授权功能 ======
		
		data() {
			return {
				merId: undefined, // 商铺id
				merName: undefined,
				merPhone: undefined,
				merAddress: undefined,
				merScore: undefined,
				merCareCount: undefined, // 关注数量
				merOdCount: 0, 		// 累计订单
				merRetFshSum: 0,	// 累计回鱼
				rank: [],			// 排名


				// ====== begin 轮播图功能 ======
				slideImgs: [],
				swiperCur: 0,
				circular: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				// ====== end 轮播图功能 ======


				// ====== begin 商品列表功能 ======
				goods: [],
				goodsLoading: false,
				goodsPageNum: 1, // 商品分页
				// ====== end 商品列表功能 ======


				// ====== begin 关注功能 ======
				merCare: true, // 当前用户是否关注
				// ====== end 关注功能 ======


				// ====== begin 授权功能 ======
				isShowAuth: false, //是否隐藏授权
				isAuto: false, //没有授权的不会自动授权
				// ====== end 授权功能 ======
			}
		},

		computed: {
			// ====== begin 授权功能 ======
			...mapGetters(['isLogin', 'uid']),
			// ====== end 授权功能 ======
		},

		onLoad(options) {
			console.log("fsh_ground::onLoad| options=%o, isLogin=%o", options, this.isLogin);
			this.merId = parseInt(options.merId);
			if(!this.merId) {
				return this.$util.Tips({
					title: '缺少商户id参数'
				}, {
					tab: 3,
					url: 1
				});
			}

			this.merName = options.merName;
			this.merScore = parseInt(options.merScore);
			this.merCareCount = parseInt(options.merCareCount);
			
			uni.setNavigationBarTitle({ title: options.merName});
			
			if (this.isLogin === true) {
				this.freshFshGroundHomePage();
			}
			else {			
				// ====== begin 授权功能 ======
				this.authOpen(); // 判断如果没登录，则自动弹出授权登录窗口
				// ====== end 授权功能 ======
			}
		},

		methods: {
			// 刷新店铺首页
			freshFshGroundHomePage() {
				this.goodsLoading = true;
				loadFshGroundHomePage(this.merId).then(res => {
					console.log("loadFshGroundHomePage",res.entity)
					this.goodsLoading = false;
					this.goods = res.entity.goods;
					this.merCare = res.entity.merCare;
					this.rank = res.entity.rank;
					this.merOdCount = res.entity.merOdCount;
					this.merRetFshSum = res.entity.merRetFshSum;
					
					// ====== begin 轮播图功能 ======
					//this.slideImgs = res.entity.slideImgs; 暂时不显示，后面如果要求再放开，因为对应还要加上传图片的功能
					// ====== end 轮播图功能 ======
					this.goodsPageNum = 1;
					
					this.merName = res.entity.merchant.merName;
					this.merPhone = res.entity.merchant.merPhone;
					this.merAddress = res.entity.merchant.merAddress;
					this.merScore = parseInt(res.entity.merchant.merScore);
					this.merCareCount = parseInt(res.entity.merchant.merCareCount);
					uni.setNavigationBarTitle({ title: this.merName.merName});
				}).catch(err => {
					this.goodsLoading = false;
					console.log("loadFshGroundHomePage fail: " + err.msg)
					MyTip(err.msg);
				});
			},


			// ====== begin 轮播图功能 ======
			// swiper
			swiperChange(e) {
				// this.swiperCur = e.detail.current
				let {
					current,
					source
				} = e.detail;
				if (source === 'autoplay' || source === 'touch') {
					//根据官方 source 来进行判断swiper的change事件是通过什么来触发的，autoplay是自动轮播。touch是用户手动滑动。其他的就是未知问题。抖动问题主要由于未知问题引起的，所以做了限制，只有在自动轮播和用户主动触发才去改变current值，达到规避了抖动bug
					this.swiperCur = e.detail.current;
				}
			},
			/*点击轮播图跳转*/
			goUrl(url) {
				return; // 暂时不需要点击跳转
				let isHttp = url.substring(0, 4) == 'http' ? true : false;
				if (isHttp) {
					// #ifdef H5
					location.href = url;
					// #endif
					// #ifndef H5
					uni.switchTab({
						url: url
					});
					// #endif
				} else {
					uni.navigateTo({
						url: url
					});
				}
			},
			// ====== end 轮播图功能 ======


			onTapLocationNav() {
				MyTip("玩命开发中，敬请期待！！！", 1200)
			},
			
			onTapShare() {
				MyTip("玩命开发中，敬请期待！！！", 1200)
			},
			
			// 去排名页
			goRankPage() {
				let ponds = this.goods.filter(a=>a.isFishCate).map(a=>{
					let {productId, storeName} = a;
					return {productId, storeName};
				});
				ponds = JSON.stringify(ponds); // uni-app之页面间传递和接收数组 https://www.cnblogs.com/luyj00436/p/15323488.html
				uni.navigateTo({
					url: "/pages/fsh/fsh_rank?merId="+this.merId+"&ponds="+ponds
				});
			},
			
			onTapPhone() {
				console.log("makePhoneCall", this.merPhone);
				uni.makePhoneCall({
					phoneNumber: this.merPhone
				});
			},



			// ====== begin 关注功能 ======
			// 关注商铺
			follow: function() {
				followStore(this.merId).then(res => {
					if (res.status === 200) {
						this.merCare = true;
					}
					this.$util.Tips({
						title: res.message
					});
				});
			},
			// 取消关注
			unfollow: function() {
				unfollowStore(this.merId).then(res => {
					if (res.status === 200) {
						this.merCare = false;
					}
					this.$util.Tips({
						title: res.message
					});
				});
			},
			// 设置是否关注
			followToggle: function() {
				this.merCare ? this.unfollow() : this.follow();
			},
			// ====== end 关注功能 ======


			// ====== begin 商品列表功能 ======

			// 加载商品列表
			loadGoods(pageNum, cbDone) {
				this.goodsLoading = true;
				queryGoodsByFshGround(this.merId, pageNum).then(res => {
					this.goodsLoading = false;
					if (cbDone)
						cbDone(res.entity);
				}).catch(err => {
					this.goodsLoading = false;
					if (cbDone)
						cbDone(false);
					console.log("queryGoodsByFshGround fail: " + err.msg)
					MyTip(err.msg);
				});
			},


			// 上拉刷新，重新加载第一页
			// onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新 https://uniapp.dcloud.io/collocation/frame/lifecycle?id=page
			// 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh
			onPullDownRefresh() {
				this.loadGoods(1, (data) => {
					this.goods = data;
					uni.stopPullDownRefresh();
				});
			},

			// 触底刷新，加载下一页
			// onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据 https://uniapp.dcloud.io/collocation/frame/lifecycle?id=page
			onReachBottom() {
				this.loadGoods(this.goodsPageNum + 1, (data) => {
					if (data) {
						this.goodsPageNum += 1;
						this.goods.push(...data);
					}
				});
			},

			// 去商品详情页
			goGoodsDetail(item) {
				uni.navigateTo({
					url: `/pages/goods_details/index?id=${item.productId}`
				})
			},
			// ====== end 商品列表功能 ======


			// ====== begin 授权功能 ======
			// 打开授权
			openAuto() {
				this.isAuto = true;
				this.isShowAuth = true;
				console.log("openAuto, this.isShowAuth=true");
			},
			// 授权回调
			onLoadFun() {
				this.isShowAuth = false;
				
				if(!this.isLogin) {
					console.log("open auth")
					this.openAuto();
					return;
				}
				
				console.log("fsh_ground::onLoadFun");
				this.freshFshGroundHomePage();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			// 打开授权			
			authOpen: function() {
				let that = this;
				if (that.isLogin === false) {
					console.log("fsh_ground::authOpen ...");
					// #ifdef H5 || APP-PLUS
					toLogin();
					// #endif
					// #ifdef MP
					that.$set(that, 'isAuto', true);
					that.$set(that, 'isShowAuth', true);
					// #endif
				}
			},
			// ====== end 授权功能 ======
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	// ====== begin 轮播图功能 ======
	.swiper {
		position: relative;
		width: 100%;
		/* #ifdef MP  */
		height: auto;
		/* #endif */
		/* #ifdef H5 || APP-PLUS */
		height: 320rpx;
		/* #endif */

		margin: 0 auto;
		border-radius: 10rpx;
		overflow-x: hidden;
		/* #ifdef MP */
		z-index: 10;

		/* #endif */
		swiper,
		.swiper-item,
		image {
			width: 100%;
			height: 280rpx;
			border-radius: 10rpx;
		}

		.slide-navigator {}

		image {
			transform: scale(0.93);
			transition: all 0.6s ease;
		}

		swiper-item.active {
			image {
				transform: scale(1);
			}
		}
	}
	// ====== end 轮播图功能 ======


	// ====== begin 商品列表功能 ======
	.goods {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-top: 20rpx;
		padding-right: 20rpx;
		padding-left: 20rpx;
		background-color: #F5F5F5;

		/*width: 750rpx;*/
		.item {
			width: 345rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			background-color: #FFFFFF;
			overflow: hidden;

			.image {
				width: 345rpx;
				height: 345rpx;

				image {
					display: block;
					width: 100%;
					height: 100%;
				}
			}

			.text {
				padding: 20rpx 20rpx 25rpx;

				.name {
					font-weight: 500;
					font-size: 30rpx;
					line-height: 1;
					color: #222222;
					display: flex;
					align-items: center;

					.name_text {
						display: inline-block;
						max-width: 400rpx;
					}
				}

				.money-wrap {
					display: flex;
					align-items: center;
					margin-top: 43rpx;

					.money {
						font-weight: bold;
						font-size: 26rpx;
						color: $theme-color;

						text {
							font-size: 34rpx;
							line-height: 1;
						}
					}

					.ticket {
						height: 26rpx;
						padding-right: 9rpx;
						padding-left: 9rpx;
						border: 1rpx solid $theme-color;
						border-radius: 4rpx;
						margin-left: 10rpx;
						font-weight: 500;
						font-size: 20rpx;
						line-height: 24rpx;
						color: $theme-color;
					}
				}

				.score {
					margin-top: 20rpx;
					font-weight: 500;
					font-size: 20rpx;
					line-height: 1;
					color: #737373;
				}
			}

			.foot {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 52rpx;
				background: linear-gradient(to right, #F11B09, #F67A38);
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;

				.iconfont {
					margin-right: 10rpx;
					font-size: 22rpx;
					line-height: 1;
				}
			}
		}
	}

	.column {
		padding: 0;
		background-color: #FFFFFF;

		.item {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;
			padding: 30rpx 20rpx;
			border-radius: 0;
			margin-bottom: 0;

			&::before {
				content: " ";
				position: absolute;
				top: 0;
				right: 20rpx;
				left: 250rpx;
				border-top: 1rpx solid #F5F5F5;
			}

			.image {
				width: 200rpx;
				height: 200rpx;
				border-radius: 16rpx;
				overflow: hidden;
			}

			.text {
				position: relative;
				flex: 1;
				min-width: 0;
				padding-top: 0;
				padding-right: 0;
				padding-bottom: 0;

				.name {
					color: #282828;
				}

				.money-wrap {
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					margin-top: 52rpx;

					.ticket {
						height: 28rpx;
						padding-right: 12rpx;
						padding-left: 12rpx;
						border: none;
						border-radius: 0;
						margin-top: 17rpx;
						margin-left: 0;
						background: url(../../static/images/yh.png) top left/100% 100% no-repeat;
						line-height: 28rpx;
					}
				}
			}

			.foot {
				position: absolute;
				right: 20rpx;
				bottom: 30rpx;
				height: 44rpx;
				padding-right: 17rpx;
				padding-left: 17rpx;
				border-radius: 22rpx;
				font-size: 22rpx;
				color: #F5F5F5;
			}
		}
	}

	// ====== end 商品列表功能 ======


	// ====== begin 关注功能 ======
	.carebtn {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 113rpx;
		height: 48rpx;
		border-radius: 24rpx;
		font-weight: 500;
		font-size: 22rpx;
		color: #FFFFFF;
	}

	.carebtn.on {
		background-image: linear-gradient(-90deg, #f67a38 0%, #f11b09 100%);
	}

	.carebtn.off {
		background-image: linear-gradient(-90deg, #666666 0%, #999999 100%);
	}

	// ====== end 关注功能 ======
	
	.rank {
		display: flex; flex-direction: column; align-items: center; justify-content: center;
	}
	.rank .modal {
		width:34px; height:40px;
		// position: relative;
		// top: 40px;
	}
	.rank .avatar {
		width:150rpx; height:150rpx;
		border-radius: 150rpx;
		margin: 10rpx 0rpx;
	}
	.rank > view > text:last-child {
		color: orangered;
		font-weight: bold;
		margin-left: 8rpx;
	}
</style>
